<template>
<!-- 轮播图 -->
  <div class="index-wrap"  id="indexwrap">
<mt-swipe :auto="4000">
  <mt-swipe-item  v-for="item in swiper"   :key="item.img">
    <img  v-lazy="item.img">
  </mt-swipe-item>
</mt-swipe>
  </div>
</template>
<script>
import Vue from "vue";
import "mint-ui/lib/style.css";
import MintUI from "mint-ui";
import { Swipe, SwipeItem } from 'mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.use(MintUI);
export default {
  name: "Index",
  data(){
    return{
           swiper:[
                 {img:"https://livewebbs2.msstatic.com/home_recommend_live_app_1559744332.jpg?ips_thumbnail/0/w/700/"},
                 {img:"https://livewebbs2.msstatic.com/home_recommend_live_app_1565872467.jpg?ips_thumbnail/0/w/700/"},
                 {img:"https://livewebbs2.msstatic.com/home_recommend_live_app_1564456688.png?ips_thumbnail/0/w/700/"},
                 {img:"https://livewebbs2.msstatic.com/home_recommend_live_app_1565681485.jpg?ips_thumbnail/0/w/700/"},
                 {img:"https://livewebbs2.msstatic.com/home_recommend_live_app_1495184856.jpg?ips_thumbnail/0/w/700/"},
                 {img:"https://livewebbs2.msstatic.com/home_recommend_live_app_1565779273.jpg?ips_thumbnail/0/w/700/"}
           ]
    }
  },
  // mounted() {
  // }
};
</script>
<style  lang="scss" scoped>
.mint-swipe {
  height: 200px;

   .mint-swipe-item {
    text-align: center;

    img {
      width: 100%;
      height: 100%;
    }
   } 
}
</style>